<template>
    <div class="container-follow">
        <!-- 头部 -->
        <van-nav-bar
	    left-text="返回"
	    left-arrow
		@click-left="onClickLeft">
            <template #title>
                我的关注
            </template>
            <template #right>
                <div @click="toUser" class="nav-img"><img src="../assets/user.png" ></div>
            </template>
	    </van-nav-bar>
        <!-- 列表区域 -->
        <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="reLoadData"
            :immediate-check="false"
            offset="10"
            v-if="followList.length>0"
            >
            <div class="room-list">
                <div class="room-item" @click="to_roomDetail(item1.roomId)" v-for="item1 in followList" :key="item1.id">
                    <div class="room-pic">
					<img :src="item1.roomPicture" alt="">
					<div class="sale-img" v-if="item1.realEstateExclusiveAgent==1">
						<img src="../assets/sale.png" alt="">
					</div>
				</div>
				<div class="room-text">
					<div class="room-name">
						<span>{{item1.roomName}}</span>
						<!-- <span v-if="item1.realEstateExclusiveAgent==1">
							<img src="../assets/sole.png" alt="">
						</span> -->
					</div>
					<div class="room-address">
						<span>{{item1.realEstateModule}}</span>
						<span>|</span>
						<span>{{item1.realEstateCity}}-{{item1.realEstateDistrict}}-{{item1.realEstateName}}</span>
					</div>
					<div class="room-format">
						<div class="format-item" v-for="item2 in item1.roomPropertyConditionsFormat" :key="item2">
							{{item2}}
						</div>
					</div>
					<div class="room-num">
						<div class="num-prices">{{item1.monthlyRent}}元/月</div>
                        <div class="roo-follow">已关注</div>
					</div>
				</div>
                    
                </div>
            </div>
        </van-list>
        <div class="hasnone" v-else>
            <img src="../assets/noroom.png" alt="">
        </div>
    </div>
</template>
<script>
import {followList,delfollow} from "@/api/user"
export default {
    data(){
        return{
            // 关注列表数组
            followList:[],
            // 关注列表请求参数
            followQuery:{
                currentPage:1,
                pageSize:5
            },
            loading: false,
      	    finished: false,
        }
    },
    created(){
        this.loadData()
    },
    methods:{
        loadData(){
            const{followQuery}=this
            // 获取关注列表
            followList({currentPage:followQuery.currentPage,pageSize:followQuery.pageSize}).then(res=>{
                console.log(res)
                // 店铺数组
				this.followList = res.current === "1" ? res.records : [...this.followList, ...res.records];
				console.log(this.roomList)
				// console.log(this.roomList)
				this.loading = false;
				// 如果
				if (this.followList >= res.total) {
					this.finished = true;		// 结束加载状态
				}else if(res.records.length>0){
					this.finished = false;
				}else if(res.records.length==0){
					this.finished = true;		
				}
            })
        },
        // 页码数++，重新加载数据
        reLoadData(){
            this.loading = true;
            const{followQuery}=this
            followQuery.currentPage+=1
            this.loadData()
        },
        // 返回上一级
        onClickLeft(){
            this.$router.go(-1);
        },
		// 去用户信息
		toUser(){
			this.$router.push({path:"/user"})
		},
        // 去店铺列表
        to_roomDetail(id){
            console.log(id)
            this.$router.push({path:"/roomDetail",query:{roomId:id}})
        },
    }
}
</script>

<style lang="less" scoped>
// 顶部样式
/deep/.van-nav-bar__text{
	color: #333;
}
/deep/.van-nav-bar{
	.van-icon{
		color: #333;
	}
}
.nav-img{
	img{
		width: 0.39rem;
		height: 0.39rem;
	}
}
.title-logo{
	width: 1.92rem;
	height: 0.46rem;
}
// 店铺数组
.room-list{
	margin: 0.45rem 0;
	padding: 0 0.34rem;
	height: 100%;
}
.room-item{
	display: flex;
	margin-top: 0.25rem;
	.room-pic{
		width: 1.94rem;
    	height: 1.5rem;
		position: relative;
		img{
			width: 100%;
			height: 100%;
		}
		.sale-img{
			position: absolute;
			right: 0;
			top: 0;
		}
	}
	.room-text{
		flex: 1;
		font-size: 0.2rem;
		padding-left: 0.3rem;
		.room-name{
			font-weight: 600;
			font-size: 0.32rem;
		}
		.room-address{
			display: flex;
			font-size: 0.22rem;
			align-items: center;
			color: #999;
			margin-top: 0.1rem;
			span{
				position: relative;
				margin-right: 0.1rem;
			}
		}
		.room-num{
			display: flex;
			font-size: 0.2rem;
			align-items: center;
			justify-content: space-between;
            margin-top: 0.15rem;
			.num-prices{
				color: #EA4800;
				font-weight: 600;
				font-size: 0.28rem;
			}
            .roo-follow{
                width: 1.2rem;
                height: 0.35rem;
                background-color: #999999;
                border-radius: 0.15rem;
                color: #fff;
                display: flex;
                align-items: center;
                justify-content: center;
            }
		}
	}
}
.room-num{
		.num-area{
			display: flex;
			align-items: center;
		}
}
//物业条件数组
.room-format{
  display: flex;
  margin: 0.1rem 0;
  .format-item{
    font-size: 0.18rem;
    margin-right: 0.15rem;
	color: #FFA740;
	background-color: #fff5ea;
	padding: 2px;

  }
}
// quesh
.hasnone{
    display: flex;
    justify-content: center;
    padding-top: 1.5rem;
}
</style>